<template>
  <div class="editSchedule">
    <el-dialog :title="option.title" width="60%"
        :visible.sync="isShow"
        @close="closeDialog" @open="openDialog" 
        :close-on-click-modal="false">
        <el-card>
          <el-alert title="因考虑班次和班次事件的一致性，修改为不同类型的班次需删除原先班次，再新增新班次" type="warning"></el-alert>
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px">
            <el-row>
              <el-col :span="16">
                <el-form-item label="排班计划编号" prop="SPID">
                  <el-input v-model="ruleForm.SPID" size="small" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="16">
                <el-form-item label="坐席编号" prop="AGENTID">
                  <el-input v-model="ruleForm.AGENTID" size="small" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="16">
                <el-form-item label="班次日期" prop="CLASSESDATE">
                  <el-date-picker
                    v-model="ruleForm.CLASSESDATE"
                    type="date"
                    format="yyyy-MM-dd"
                    value-format="yyyyMMdd"
                    placeholder="选择日期"
                    @blur="DateFocus"
                    :clearable="false"
                    :disabled="option.myShow">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
           <el-row>
              <el-col :span="16">
                <el-form-item label="班次名称" prop="ClassNAME">
                  <el-select v-model="ruleForm.ClassNAME" clearable placeholder="请选择" @change="handleClassChange" :disabled="ruleForm.OTNAME != undefined&&ruleForm.OTNAME!=''||option.myShow">
                    <el-option
                      v-for="(item,index) in tableDataClass"
                      :key="item.CLASSESID"
                      :label="item.CLASSESNAME"
                      :value="item.CLASSESID">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="加班名称" prop="OTNAME">
                  <el-select v-model="ruleForm.OTNAME" placeholder="请选择" clearable @change="handleOTChange" :disabled="ruleForm.ClassNAME != undefined&&ruleForm.ClassNAME!=''||option.myShow">
                    <el-option
                      v-for="(item,index) in tableDataOT"
                      :key="item.OTID"
                      :label="item.OTNAME"
                      :value="item.OTID">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="16" v-show="option.myShow&&option.row.ruleForm.TOACTIVITYID!=''">
                <el-form-item label="班次事件名称" prop="ClassEventName">
                  <el-select v-model="ruleForm.ClassEventName" placeholder="请选择" clearable @change="handleClassEventChange"  @focus="DateFocus">
                    <el-option
                      v-for="(item,index) in tableDataClassEvent"
                      :key="item.CLASSESEVENTID"
                      :label="item.CLASSESEVENTNAME"
                      :value="item.CLASSESEVENTID">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="开始时间" prop="SRTTIME">
                  <el-time-picker size="small" style="width:100%;" 
                    :disabled="view==='week'"
                    :clearable="false"
                    v-model="ruleForm.SRTTIME" placeholder="请选择开始时间"
                    format="HH:mm"
                    value-format="HH:mm"
                    @blur="DateFocus"
                    @focus="ruleForm.SRTTIME===null || ruleForm.SRTTIME===''?ruleForm.SRTTIME='00:00':ruleForm.SRTTIME;DateFocus()">
                  </el-time-picker>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="结束时间" prop="ENDTIME">
                  <el-time-picker size="small" style="width:100%;" 
                    :disabled="view==='week'"
                    :clearable="false"
                    v-model="ruleForm.ENDTIME" placeholder="请选择开始时间"
                    format="HH:mm"
                    value-format="HH:mm"
                    @blur="DateFocus"
                    @focus="ruleForm.ENDTIME===null || ruleForm.ENDTIME===''?ruleForm.ENDTIME='00:00':ruleForm.ENDTIME;DateFocus()">
                  </el-time-picker>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="技能" prop="SKILLFLG">
                <el-select size="small" :disabled="classEventFlag==false" v-model="ruleForm.SKILLFLG" clearable placeholder="请选择技能">
                  <el-option
                    v-for="item in option.skillOption"
                    :key="item.FIELDKEY"
                    :label="item.FIELDVALUE"
                    :value="item.FIELDKEY">
                  </el-option>
                </el-select>
              </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <div slot="footer" class="dialog-footer">
          <el-button @click="option.isShow = false;" size="mini">取 消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')" size="mini">确 定</el-button>
          <!-- <el-button type="danger" @click="delConfirm()" size="mini">删 除</el-button> -->
        </div>
      </el-dialog>
  </div>
</template>

<script>
import request from "@/common/utils/requestWFM";
import scheduleAdd from "@/message/wfm/intelligenceSchedule/scheduleReport/scheduleAdd";
import scheduleEdit from "@/message/wfm/intelligenceSchedule/scheduleReport/scheduleEdit";
import scheduleDel from "@/message/wfm/intelligenceSchedule/scheduleReport/scheduleDel";

export default {
  props: { option: Object },
  components: {

  },
  data() {
    return {
      classEventFlag:false,
      ruleForm: {
        SKILLFLG:'',
        SPID: '',
        AGENTID: '',
        ClassNAME: '',
        ClassEventName: '',
        OTName: '',
        CLASSESDATE: '',
        ACTIVITYTYPE: '',
        ACTIVITYID: '',
        SRTTIME: '',
        ENDTIME: '',
        TOACTIVITYID: '',
        TOACTIVITYNAME: '',
        TOACTIVITYCATEG: '',
        TOACTIVITYTYPE: '',
      },
      rules: {
        CLASSESDATE: [{required: true,message: '请输入班次日期',trigger: 'blur'}],
        ACTIVITYTYPE: [{required: true,message: '请输入活动类型编号',trigger: 'blur'}],
        SRTTIME: [{required: true,message: '请选择开始日期',trigger: 'change'}],
        ENDTIME: [{required: true,message: '请选择结束日期',trigger: 'change'}],
      },
      ruleFormBack: {},
      tableDataClass: [],  // 班次数据
      tableDataClassEvent: [],  // 班次事件数据
      tableDataOT: [],//加班数据
      tableDataAct: [], //活动类型大类数据
      // 选择班次时拿到选中得班次所有信息
      classAllInfo: [],
      classEventAllInfo: [],
      OTAllInfo: [],
      BRANCHNO: this.$store.getters.BranchNum,
      // day--日视图   week--周视图
      view: 'day',
      op: '',  // 新增or编辑or查看
    }
  },
  computed: {
    isShow: {
      get() {
        return this.option.isShow;
      },
      set(value) {
        this.option.isShow = value;
      }
    }
  },
  created(){

  },
  mounted(){

  },
  methods: {
    DateFocus(){
      this.$forceUpdate(); 
    },
    openDialog() {
      if (this.$refs['ruleForm'] != undefined) {
        this.$refs['ruleForm'].clearValidate();
      }
      this.ruleForm = JSON.parse(JSON.stringify(this.option.row.ruleForm));
      this.classEventFlag = this.ruleForm.TOACTIVITYID == '' ? true : false
      this.ruleFormBack = this.option.row.ruleFormBack?JSON.parse(JSON.stringify(this.option.row.ruleFormBack)):{};
      this.BRANCHNO = this.option.row.BRANCHNO;
      this.view = this.option.row.view;
      this.op = this.option.row.op;
      this.tableDataClass = this.option.row.tableDataClass;
      this.tableDataClassEvent = this.option.row.tableDataClassEvent;
      this.tableDataOT = this.option.row.tableDataOT;
      this.tableDataAct = this.option.row.tableDataAct;
      this.classAllInfo = this.option.row.classAllInfo;
      this.classEventAllInfo = this.option.row.classEventAllInfo;
      this.OTAllInfo = this.option.row.OTAllInfo;
      // console.log(this.option);
    },
    closeDialog(formName) {
      if (this.$refs[formName] != undefined) {
        this.$refs[formName].clearValidate();
        this.$refs[formName].resetFields();
      }
      this.classEventFlag = false
      this.ruleForm = {},
      this.ruleFormBack = {};
      this.classAllInfo = [];
      this.classEventAllInfo = [];
      this.OTAllInfo = [];
    },
    // 班次变化时拿到活动类型
    handleClassChange(val){
      this.classAllInfo = [];
      for(var i=0;i<this.tableDataClass.length;i++){
        if(this.tableDataClass[i].CLASSESID == val){
          this.classAllInfo = this.tableDataClass[i];
          break;
        }
      }
      this.$forceUpdate();
      // console.log(val,this.ruleForm.ClassEventNAME);
    },
    // 班次事件变化时拿到活动类型
    handleClassEventChange(val){
      this.classEventAllInfo = [];
      for(var i=0;i<this.tableDataClassEvent.length;i++){
        if(this.tableDataClassEvent[i].CLASSESEVENTID == val){
          this.classEventAllInfo = this.tableDataClassEvent[i];
          break;
        }
      }
      this.$forceUpdate();
      // console.log(val,this.ruleForm.ClassNAME);
    },
    // 班次事件变化时拿到活动类型
    handleOTChange(val){
      this.OTAllInfo = [];
      for(var i=0;i<this.tableDataOT.length;i++){
        if(this.tableDataOT[i].OTID == val){
          this.OTAllInfo = this.tableDataOT[i];
          break;
        }
      }
      this.$forceUpdate();
      // console.log(val,this.ruleForm.ClassNAME);
    },
    // 查询活动大类
    findAct(data,callback){
      this.tableDataAct.forEach(item=>{
        if(data === item.ACTIVITYTYPE){
          callback(item.ACTIVITYCATEG);
        }
      })
    },
    // 新增or编辑 保存
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(this.ruleForm.ClassEventName === '' || this.ruleForm.ClassEventName == undefined || this.ruleForm.ClassEventName == '-1'){
            // 如果只选择班次或者加班，未选择班次事件，活动类型则给班次或者加班得
            if((this.ruleForm.ClassNAME === '' || this.ruleForm.ClassNAME == undefined || this.ruleForm.ClassNAME == '-1')){
              this.ruleForm.ACTIVITYID = this.OTAllInfo.OTID;
              this.ruleForm.ACTIVITYTYPE = this.OTAllInfo.ACTIVITYTYPE;
            }else{
              this.ruleForm.ACTIVITYID = this.classAllInfo.CLASSESID;
              this.ruleForm.ACTIVITYTYPE = this.classAllInfo.ACTIVITYTYPE;
            } 
          }else{
            if((this.ruleForm.ClassNAME === '' || this.ruleForm.ClassNAME == undefined || this.ruleForm.ClassNAME == '-1') &&
              (this.ruleForm.OTNAME === '' || this.ruleForm.OTNAME == undefined || this.ruleForm.OTNAME == '-1')){
              this.$message({
                type: "error",
                message: "请选择班次或者加班"
              })
              return;
            }
            // 如果选择班次事件，班次或者加班必须选择，活动类型则给班次事件得,所属活动给加班或者班次的
            this.ruleForm.ACTIVITYID = this.classEventAllInfo.CLASSESEVENTID;
            this.ruleForm.ACTIVITYTYPE = this.classEventAllInfo.ACTIVITYTYPE;
            var TOACTIVITYTYPE = '';
            if((this.ruleForm.ClassNAME === '' || this.ruleForm.ClassNAME == undefined || this.ruleForm.ClassNAME == '-1')){
              this.ruleForm.TOACTIVITYID = this.OTAllInfo.OTID;
              this.ruleForm.TOACTIVITYNAME = this.OTAllInfo.OTNAME;
              this.ruleForm.TOACTIVITYTYPE = this.OTAllInfo.ACTIVITYTYPE;
              let act=this.findAct(this.OTAllInfo.ACTIVITYTYPE,function(data){
                TOACTIVITYTYPE = data;
              }); 
              this.ruleForm.TOACTIVITYCATEG = TOACTIVITYTYPE;
            }else{
              this.ruleForm.TOACTIVITYID = this.classAllInfo.CLASSESID;
              this.ruleForm.TOACTIVITYNAME = this.classAllInfo.CLASSESNAME;
              this.ruleForm.TOACTIVITYTYPE = this.classAllInfo.ACTIVITYTYPE;
              let act=this.findAct(this.classAllInfo.ACTIVITYTYPE,function(data){
                TOACTIVITYTYPE = data;
              }); 
              this.ruleForm.TOACTIVITYCATEG = TOACTIVITYTYPE;
            } 
          }
          if(!this.ruleForm.ACTIVITYID){
            this.$message({
              type: "error",
              message: "请选择活动类型名称"
            })
            return;
          }
          if(this.option.myShow && !this.ruleForm.ClassEventName){
            this.$message({
              type: "error",
              message: "此操作下必须选择关联班次事件"
            })
            return;
          }
          var c1 = Date.parse('2008-08-08 '+this.ruleForm.SRTTIME); //'2008-08-08'这个日期随便给
          var c2 = Date.parse('2008-08-08 '+this.ruleForm.ENDTIME);
          var c3 = Date.parse('2008-08-08 '+this.option.startTime);
          var c4 = Date.parse('2008-08-08 '+this.option.endTime);
          if (c1 > c2) {
            this.$message({
              type: "error",
              message: "开始时间不能大于结束时间"
            })
            return;
          }
          if(this.option.myShow && (c1<c3 || c2>c4)){
            this.$message({
              type: "error",
              message: "开始时间和结束时间应在该班次时间内"
            })
            return;
          }
          // console.log('保存按钮',this.ruleForm,this.ruleFormBack);
          if(this.op=='add'){
            this.scheduleAdd();
          }else{
            this.scheduleEdit();
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 新增
    scheduleAdd(){
      console.log('新增接口：',this.ruleForm);
      this.loading = true;
      let resBody = new scheduleAdd();
      resBody.data.SPID = this.ruleForm.SPID;
      resBody.data.SKILLFLG = this.ruleForm.SKILLFLG;
      resBody.data.AGENTID = this.ruleForm.AGENTID;
      resBody.data.CLASSESDATE = this.ruleForm.CLASSESDATE;
      resBody.data.ACTIVITYTYPE = this.ruleForm.ACTIVITYTYPE; 
      resBody.data.ACTIVITYID = this.ruleForm.ACTIVITYID; 
      resBody.data.SRTTIME = this.ruleForm.SRTTIME; 
      resBody.data.ENDTIME = this.ruleForm.ENDTIME; 
      resBody.data.TOACTIVITYID = this.ruleForm.TOACTIVITYID;
      resBody.data.TOACTIVITYNAME = this.ruleForm.TOACTIVITYNAME;
      resBody.data.TOACTIVITYCATEG = this.ruleForm.TOACTIVITYCATEG;
      resBody.data.TOACTIVITYTYPE = this.ruleForm.TOACTIVITYTYPE;
      request(resBody)
        .then(response => {
          if (response.SYS_HEAD.ReturnCode === "000000") {
            this.loading = false;
            this.$message({
              type: "success",
              message: "新增成功"
            });
            console.log(this.$parent)
            if(this.option.myShow){
              this.$parent.$parent.queryModel1();
            }else{
              this.$parent.queryModel();
            }
            this.option.isShow = false;
          }else{
            this.loading = false;
            this.$message({
              type: "error",
              message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
            })
          }
        })
        .catch(error => {
          this.loading = false;
        });
    },
    // 修改
    scheduleEdit(){
      console.log('修改接口：',this.ruleForm);
      this.loading = true;
      let resBody = new scheduleEdit();
      resBody.data.SPID = this.ruleForm.SPID;
      resBody.data.SKILLFLG = this.ruleForm.SKILLFLG;
      resBody.data.AGENTID = this.ruleForm.AGENTID;
      resBody.data.ORIGCLASSESDATE = this.ruleFormBack.CLASSESDATE;
      resBody.data.ORIGACTIVITYTYPE = this.ruleFormBack.ACTIVITYTYPE; 
      resBody.data.ORIGACTIVITYID = this.ruleFormBack.ACTIVITYID; 
      resBody.data.NEWCLASSESDATE = this.ruleForm.CLASSESDATE; 
      resBody.data.NEWACTIVITYTYPE = this.ruleForm.ACTIVITYTYPE; 
      resBody.data.NEWACTIVITYID = this.ruleForm.ACTIVITYID;
      resBody.data.NEWSRTTIME = this.ruleForm.SRTTIME;
      resBody.data.NEWENDTIME = this.ruleForm.ENDTIME;
      resBody.data.TOACTIVITYID = this.ruleForm.TOACTIVITYID;
      resBody.data.TOACTIVITYNAME = this.ruleForm.TOACTIVITYNAME;
      resBody.data.TOACTIVITYCATEG = this.ruleForm.TOACTIVITYCATEG;
      resBody.data.TOACTIVITYTYPE = this.ruleForm.TOACTIVITYTYPE;
      request(resBody)
        .then(response => {
          if (response.SYS_HEAD.ReturnCode === "000000") {
            this.loading = false;
            this.$message({
              type: "success",
              message: "修改成功"
            });
            this.$parent.$parent.queryModel1();
            this.option.isShow = false;
          }else{
            this.loading = false;
            this.$message({
              type: "error",
              message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
            })
          }
        })
        .catch(error => {
          this.loading = false;
        });
    },
    delConfirm(){
      this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.scheduleDel();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 删除班表
    scheduleDel(row,op){
      this.loading = true;
      let resBody = new scheduleDel();
      if(row){
        this.ruleForm = row;
      }
      resBody.data.SPID = this.ruleForm.SPID;
      resBody.data.AGENTID = this.ruleForm.AGENTID;
      resBody.data.CLASSESDATE = this.ruleForm.CLASSESDATE;
      resBody.data.ACTIVITYTYPE = this.ruleForm.ACTIVITYTYPE; 
      resBody.data.ACTIVITYID = this.ruleForm.ACTIVITYID; 
      resBody.data.TOACTIVITYID = this.ruleForm.TOACTIVITYID;
      resBody.data.TOACTIVITYNAME = this.ruleForm.TOACTIVITYNAME;
      resBody.data.TOACTIVITYCATEG = this.ruleForm.TOACTIVITYCATEG;
      resBody.data.TOACTIVITYTYPE = this.ruleForm.TOACTIVITYTYPE;
      request(resBody)
        .then(response => {
          if (response.SYS_HEAD.ReturnCode === "000000") {
            this.loading = false;
            this.$message({
              type: "success",
              message: "删除成功"
            });
            if(op!='allDel'){
              this.$parent.$parent.queryModel1();
              this.option.isShow = false;
            }else{
              this.$parent.$parent.dialogVisible = false;
            }
          }else{
            this.loading = false;
            this.$message({
              type: "error",
              message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
            })
          }
        })
        .catch(error => {
          this.loading = false;
        });
    },
  }
};
</script>

<style  scoped lang="scss">

</style>
